@import "~common/less/variables";
@import "~common/less/utils";

.home{
  // background-color: @color-white;
  .home-banner{
    #w100;
  }
  .home-loca{
    padding: 0 0.3rem;
    font-size: @font-size-medium;
    #flex;
    #flex-jcsb;
    #lh1-2;
    svg{
      #icon-fs0-5-lb;
      vertical-align: middle;
    }
  }
  .home-func{
    #flex;
    #flex-vw;
    #tac;
    font-size: @font-size-medium;
    line-height: 1.6rem;
    div{
      background-color: @color-white;
      width: 33%;
      height: 1.6rem;
      margin-left: 0.5%;
      margin-bottom: 2px;
      svg{
        position: relative;
        top: 3%;
        font-size: 0.6rem;
        color: @color-blue;
      }
    }
    div:nth-of-type(1){
      margin-left: 0;
      position: relative;
      .cart-length{
        position: absolute;
        right: 0.1rem;
        top: 0.25rem;
        color: @color-white;
        background-color: @color-red;
        width: 0.4rem;
        height: 0.4rem;
        #border-radius(50%);
        font-size: 0.3rem;
        line-height: 0.4rem;
      }
    }
    div:nth-of-type(4){
      margin-left: 0;
    }
  }
  .home-recommend-commodity{
    margin-top: 0.2rem;
    background-color: @color-white;
    .title{
      #flex;
      #flex-jcsb;
      #lh1-2;
      font-size: @font-size-medium;
      padding: 0 0.3rem;
    }
    .content{
      #w100;
      ul{
        // #flex;
        #w100;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        li{
          padding: 0.1rem;
          #tac;
          #dib;
          // width: 20%;
          width: 2rem;
          .img-avatar{
            img{
              #w100;
            }
          }
          .desc{

          }
        }
      }
      ul::-webkit-scrollbar{
        display: none; //Safari and Chrome
        -ms-overflow-style: none; //IE 10+
        overflow: -moz-scrollbars-none; //Firefox
      }
    }
  }
}